<template>
  <view>
    <view class="content">

      <image class="logo" src="/static/img.png"></image>

      <view class="text-area">
        <u-button @click="goPhoneLogin" text="手机号登录"
                  type="primary"
                  color="rgb(240, 169, 160)"
        ></u-button>
      </view>

      <view :class="['tooltip', !showTip ? 'tooltip_visible' : '']" >
        <text class="tooltip_text">请阅读并勾选用户协议</text>
        <view class="tooltip_angle"></view>
      </view>
      <view class="agreement_warp">

        <u-radio-group
            :value="radiovalue1"
            placement="column"
            @change="groupChange"
        >

            <u-radio
                :customStyle="{marginBottom: '8px'}"
                label="登录代表您已同意"
                :name="radiovalue"
                @change="radioChange"
            >
            </u-radio>

        </u-radio-group>
        <view class="agreement">
          <navigator url="/pages/useragreement/useragreement" >
            <text>用户协议</text>
          </navigator>
          、
          <navigator url="/pages/privacyagreement/privacyagreement">
            <text>隐私协议</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radiovalue1: -1,
      radiovalue: 1,
      showTip: true,

    };
  },

  onLoad() {

    // uni.clearStorageSync();


    var storageSync = uni.getStorageSync("agreement");
    if(storageSync === true){

      //不显示
      this.showTip = false;
      this.radiovalue1 = 1;
    }else {

      //显示
      this.radiovalue1 = -1;
      this.showTip = true;
    }
  },

  methods: {
    groupChange(n) {
      console.log('groupChange', n);
    },

    radioChange(n) {
      this.showTip = false;
      this.radiovalue1 = 1;
      uni.setStorageSync("agreement", true);
      console.log('radioChange', n);
    },

    //去到手机号登录页面
    goPhoneLogin(){
      if(!this.showTip){
        uni.navigateTo({
          url: "/pages/phonelogin/phonelogin"
        })
      }else {
        uni.showToast({title: "请勾选协议"})
      }

    }
  }
}
</script>

<style scoped lang="scss">
.tooltip{
  font-size: 12px ;
  color: #ffffff;
  width: 80%;
  .tooltip_text{
    background: black;
    padding: $sys-text-padding-5;
  }
  .tooltip_angle{
    position: relative;
    transform: translateY(50%);

  }
  .tooltip_angle::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    //position: absolute;
    bottom: -10px;
    left: 40px;
  }
}

.tooltip_visible{
 visibility: hidden;
}

/deep/ .u-radio-group {
  flex: unset !important;
}

.agreement_warp {
  width: 80%;
  //margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.agreement {
  display: flex;
  flex-direction: row;
  color: $sys-color-pink;
  font-size: 15px !important;
  line-height: 18px !important;
}

.text-area {
  width: 90%;
  margin: 0 auto;
  margin-top: $sys-margin-top-200;
  margin-bottom: 100rpx;
}

.logo {
  height: 150rpx;
  width: 150rpx;
  margin-top: $sys-margin-top-200;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: $sys-margin-bottom-50;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
